<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>响应式工具</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body>
	<table class="table table-bordered">
		<thead>
			<tr>
				<th> </th>
				<th>超小屏幕 <768px</th>
				<th>小屏幕 ≥768px</th>
				<th>中等屏幕 ≥992px</th>
				<th>大屏幕 ≥1200px</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>.visible-xs-*</code></td>
				<td class="bg-success">可见</td>
				<td>隐藏</td>
				<td>隐藏</td>
				<td>隐藏</td>
			</tr>
			<tr>
				<td><code>.visible-sm-*</code></td>
				<td>隐藏</td>
				<td class="bg-success">可见</td>
				<td>隐藏</td>
				<td>隐藏</td>
			</tr>
			<tr>
				<td><code>.visible-md-*</code></td>
				<td>隐藏</td>
				<td>隐藏</td>
				<td class="bg-success">可见</td>
				<td>隐藏</td>
			</tr>
			<tr>
				<td><code>.visible-lg-*</code></td>
				<td>隐藏</td>
				<td>隐藏</td>
				<td>隐藏</td>
				<td class="bg-success">可见</td>
			</tr>
			<tr>
				<td><code>.hidden-xs</code></td>
				<td>隐藏</td>
				<td class="bg-success">可见</td>
				<td class="bg-success">可见</td>
				<td class="bg-success">可见</td>
			</tr>
			<tr>
				<td><code>.hidden-sm</code></td>
				<td class="bg-success">可见</td>
				<td>隐藏</td>
				<td class="bg-success">可见</td>
				<td class="bg-success">可见</td>
			</tr>
			<tr>
				<td><code>.hidden-md</code></td>
				<td class="bg-success">可见</td>
				<td class="bg-success">可见</td>
				<td>隐藏</td>
				<td class="bg-success">可见</td>
			</tr>
			<tr>
				<td><code>.hidden-lg</code></td>
				<td class="bg-success">可见</td>
				<td class="bg-success">可见</td>
				<td class="bg-success">可见</td>
				<td>隐藏</td>
			</tr>
		</tbody>
	</table>




	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
</body>
</html>